<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-dom结构</title>
</head>
<body>
<div>old
<div id="inner">inner</div>
</div>
<div>
    <button id="btnRemove">删除inner</button>

</div>
</body>
<script src="../0.vendor/jquery-3.6.0.js"></script>
<script>

    /***
     *  document.getElement
     *     appendChild
     *     removeChilid
     *     replace
     *     insertBefore
     *        parent.insertBefore()
     * */

    /*1. append (html)*/
   // $('div').append('<h1>test</h1>');

   /*
     * 2.虚拟dom
   * */

    var box1 =$('<div></div>').text('hello').addClass('box'); // 1.create

  //  $('div').append(box1); // append
  //  $('div').before(box1);
   // $('div').after(box1);

    /*$('#btnRemove').click(function () {

    });*/

    $('#btnRemove').bind('click',btnRemoveClick);

    function btnRemoveClick() {
        $('#inner').remove();
    }

</script>

</html>